<template>
  <v-data :options="ops" theme="macarons" class="app-container"/>
</template>
<script>
	import VueECharts from '@/echarts'

	export default {

		components: {
			'v-data': VueECharts
		},
		data() {
			return {
				ops: {
					title: {
						text: '会员数据统计',
						subtext: '动态数据',
						x: 'center'
					},
					// 提示框:鼠标移动上去会显示相关信息
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
					},
					// 左上角的tips
					legend: {
						// 是否展示
						show: true,
						// 垂直方向布局
						orient: 'vertical',
						// 该元素距离左边多少,直接距离左边
						left: 'left',
						// 这里可以对应到data里面的数据
						data: ['微信访问', '扫码进入', '公众号访问', '分享进入', '搜索访问']
					},
					// 这里定义的图的数据等等
					series: [
						{
							// 图表类型:pie饼状
							type: 'pie',
							// 占当前div的50%
							radius: '50%',
							center: ['50%', '60%'],
							// 数量的值以及对应的标签名字,数据会自动的统计
							data: [
								{value: 335, name: '微信访问'},
								{value: 335, name: '公众号访问'},
								{value: 335, name: '扫码进入'},
								{value: 335, name: '分享进入'},
								{value: 1548, name: '搜索访问'}
							],
							itemStyle: {
								// emphasis是鼠标移动到上面时出现的样式
								emphasis: {
									// 阴影的大小
									shadowBlur: 10,
									// 阴影水平方向上的偏移
									shadowOffsetX: 0,
									// 阴影垂直方向上的偏移
									shadowOffsetY: 0,
									// 阴影颜色
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  /*.echarts {
    width: 100%;
    height: 100%;
  }*/
</style>
